<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./js/jQuery-3.7.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/layer/layer.js"></script>
</head>
<body>
<div class="container-fluid" >
    <h3>部门列表</h3>
    <hr>
    <button class="btn btn-primary" id="btnAddDialog" type="button">添加部门</button>
    <hr>
    <table class="table table-hover table-striped">
        <thead>
        <tr>
            <th width="120">部门编号</th>
            <th width="50%">部门名称</th>
            <th>部门地址</th>
            <th width="180">操作</th>
        </tr>
        </thead>
        <tbody id="tbody">

        </tbody>
    </table>
</div>
<!-- Modal -->
<div class="modal fade" id="addDeptDialog" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">添加部门</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group row">
                        <label for="dname" class="col-sm-3 col-form-label text-md-right">部门名称</label>
                        <div class="col-sm-8">
                            <input type="text" placeholder="请输入部门名称" class="form-control" id="dname">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="loc" class="col-sm-3 col-form-label  text-md-right">部门地址</label>
                        <div class="col-sm-8">
                            <input type="text" placeholder="请输入部门地址" class="form-control" id="loc">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" id="btnConfirm" class="btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="updateDeptDialog" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="">编辑部门</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group row">
                        <label for="txtDeptno" class="col-sm-3 col-form-label text-md-right">部门编号</label>
                        <div class="col-sm-8">
                            <input type="text" readonly class="form-control-plaintext" id="txtDeptno" >
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="txtDname" class="col-sm-3 col-form-label text-md-right">部门名称</label>
                        <div class="col-sm-8">
                            <input type="text" placeholder="请输入部门名称" class="form-control" id="txtDname">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="txtLoc" class="col-sm-3 col-form-label  text-md-right">部门地址</label>
                        <div class="col-sm-8">
                            <input type="text" placeholder="请输入部门地址" class="form-control" id="txtLoc">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" id="btnUpdate" class="btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>
</body>
<script>

    $(function () {
        dept_list();

        $('#btnAddDialog').click(function () {
            $('#addDeptDialog').modal('show');
        })

        $('#btnConfirm').click(function (){
            if ($('#dname').val()=='' || $('#loc').val()==''){
                layer.msg('请填写完整信息',{icon:2})
                return;
            }
            $.post('dept/add',{
                dname:$('#dname').val(),
                loc:$('#loc').val()
            },function (data){
                if(data.code != '200'){
                    layer.msg(data.msg,{icon:2,time:500});
                    return;
                }
                layer.msg(data.msg,{icon:1,time:500},function (){
                    $('#addDeptDialog').modal('hide');
                    $('#dname').val('');
                    $('#loc').val('');
                    dept_list();
                })

            },'JSON');
        })

        $('#btnUpdate').click(function (){
            if ($('#txtDname').val()=='' || $('#txtLoc').val()==''){
                layer.msg('请填写完整信息',{icon:2})
                return;
            }
            $.post('dept/update',{
                deptno:$('#txtDeptno').val(),
                dname:$('#txtDname').val(),
                loc:$('#txtLoc').val()
            },function (data){
                if(data.code != '200'){
                    layer.msg(data.msg,{icon:2,time:500});
                    return;
                }
                layer.msg(data.msg,{icon:1,time:500},function (){
                    $('#updateDeptDialog').modal('hide');
                    $('#txtDeptno').val('')
                    $('#txtDname').val('');
                    $('#txtLoc').val('');
                    dept_list();
                })

            },'JSON');
        })
    })


    function dept_list() {
        $.getJSON('dept/listEmp', {dname: null}, function (data) {
            console.log(data);
            let str = `<span>暂无数据</span>`
            if (data.code == '200') {
                str = ``;
                data.data.forEach(dept => {
                    str += `<tr>
                                <td>${dept.deptno}</td>
                                <td>${dept.dname}</td>
                                <td>${dept.loc}</td>
                                <td>
                                    <button type="button" onclick="dept_update(${dept.deptno})"  class="btn btn-info btn-sm">编辑</button>
                                    <button onclick="dept_del('${dept.dname}',${dept.deptno})" class="btn btn-danger btn-sm" type="button">删除</button>
                                </td>
                            </tr>`
                })
            }
            $('#tbody').html(str);
        })
    }

    function dept_del(dname,deptno){
        layer.confirm(`你确定删除&lt;${dname}&gt;部门信息吗？`,{icon:3,title:'删除提示'},function (index){
            $.getJSON('dept/del',{deptno:deptno},function (data){
                if(data.code != '200'){
                    layer.msg(data.msg,{icon:2,time:500});
                    return;
                }
                layer.msg(data.msg,{icon:1,time:500},function (){
                    layer.close(index);
                    dept_list();
                })
            })

        })

    }

    function dept_update(deptno){
        $('#updateDeptDialog').modal('show');

        $.getJSON(`dept/get/${deptno}`,function (data) {
            console.log(data);
            $('#txtDeptno').val(data.data.deptno);
            $('#txtDname').val(data.data.dname)
            $('#txtLoc').val(data.data.loc);
        })
    }
</script>
</html>